<template>
  <el-container>
    <el-header>
      <rolesearch @callSearch="callSearch" />
    </el-header>
    <el-main>
      <roleadd ref="addchild" @callAdd="reload" />
      <roleedit ref="editchild" @callEdit="reload" />
      <div>
        <el-button size="mini" type="primary" @click="onaddshow">{{
          $t("roleadd.add")
        }}</el-button>
        <el-table
          :data="datasource"
          style="width: 100%; font-size: 10px"
          max-height="450"
        >
          <el-table-column
            sortable
            prop="rolename"
            :label="$t('roletable.rolename')"
            width="auto"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            sortable
            prop="roledescribe"
            :label="$t('roletable.roledescribe')"
            width="auto"
          />
          <el-table-column
            sortable
            prop="createtime"
            :label="$t('roletable.createtime')"
            width="auto"
          />
          <el-table-column fixed="right" :label="$t('usertable.operation')">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="margin-right: 10px"
                @click="oneditshow(scope.row)"
              >
                {{ $t("roletable.edit") }}
              </el-button>

              <el-popconfirm
                title="Are you sure to delete?"
                style="margin-right: 10px"
                @onConfirm="confirm(scope.row)"
              >
                <el-button slot="reference" type="text" size="small">
                  {{ $t("roletable.remove") }}
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination :params="params" :total="total" @callPagin="callPagin" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import rolesearch from './tablecomponents/rolesearch'
import roleadd from './tablecomponents/roleadd'
import roleedit from './tablecomponents/roleedit'
import { getrolebypage, deleterole } from '@/api/role'
import pagination from '@/components/Pagination/pagination'
export default {
  name: 'Roletable',
  components: { rolesearch, roleadd, pagination, roleedit },
  data() {
    return {
      total: 0,
      datasource: [],
      params: {
        pageindex: 1,
        pagesize: 10
      },
      rolesearch: {
        rolename: '',
        roledescribe: ''
      }
    }
  },
  async created() {
    await this.getrolebypage()
  },
  methods: {
    async confirm(rows) {
      var res = await deleterole(rows)
      if (res.code === 200) {
        this.$message({
          message: 'Success',
          type: 'success'
        })

        await this.getrolebypage(this.params)
      }
    },
    async getrolebypage() {
      var par = { ...this.params, ...this.rolesearch }
      var { data } = await getrolebypage(par)
      this.datasource = data.data
      this.total = data.total
    },
    async callPagin(paginobj) {
      this.params.pageindex = paginobj.pageindex
      this.params.pagesize = paginobj.pagesize
      await this.getrolebypage()
    },
    async callSearch(searchobj) {
      this.rolesearch = { ...searchobj }
      this.params.pageindex = 1
      await this.getrolebypage()
    },
    onaddshow() {
      this.$refs.addchild.onshow()
    },
    oneditshow(obj) {
      this.$refs.editchild.onshow(obj)
    },
    async reload() {
      await this.getrolebypage()
    }
  }
}
</script>
<style scope>
</style>
